<template>
   <div class="author-set">
      <div class="author-set-zzz">
         <div class="author-set-menu">
            <ul>
               <li v-for="(item, index) in setmenu" :key="index" :class="{ liactive: liactive === item.type }"
                  @click="clickMenu(item, index)">
                  <span class="iconfont icon-xitongshezhi"></span>
                  <span>{{ item.name }}</span>
               </li>
            </ul>
         </div>
         <div class="author-set-menu-content">
            <component class="GradientAnimation" v-if="ismy" :is="componentsVue.get(componentsActive)" :AuthorInfo="AuthorInfo"
               :AuthorConfig="AuthorConfig" :ismy="ismy"></component>
         </div>
      </div>
   </div>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
const { type, settype } = useRoute().query
const props = defineProps({
   // 用户信息
   AuthorInfo: {
      type: Object as any,
   },
   // 用户配置
   AuthorConfig: {
      type: Object as any,
   },
   // 是否是自己
   ismy: {
      type: Boolean
   }
})
if (!props.ismy) {
   navigateTo('/')
}
// 状态
const liactive = ref(settype || 'basic-setup')
// 菜单列表
const setmenu = ref([
   {
      name: '基本设置',
      path: '',
      type: 'basic-setup',
   },
   {
      name: '账号安全',
      path: '',
      type: 'account-security',
   },
   {
      name: '隐私设置',
      path: '',
      type: '752',
   },
   {
      name: '偏好设置',
      path: '',
      type: '56232',
   },
])
// 准备单组件
const componentsActive: any = ref('' || liactive)
const componentsVue = new Map<string, any>()
const componentsArr = ['basic-setup', 'account-security']
const componentsMap = [
   { components: defineAsyncComponent(() => import('./basic-setup.vue')) }, // 基础设置 
   { components: defineAsyncComponent(() => import('./account-security.vue')) }, // 账号安全 
]
componentsMap.map((v: any, index: number) => componentsVue.set(componentsArr[index], v.components))
// 点击菜单事件
const clickMenu = (item: any, index: number) => {
   liactive.value = item.type
   componentsActive.value = item.type
   navigateTo('/Author/' + props.AuthorInfo.id + '?type=setting&settype=' + item.type)
}
// 处理菜单状态
setmenu.value.forEach((v: any, index: number) => {
   if (v.type === settype) {
      liactive.value = v.type
   }
})



</script>
<style lang="scss" scoped>
.author-set {
   width: 100%;
   display: flex;
   background-color: #ffffffdf;
   // background-image: url('https://alan-1252409695.cos.ap-guangzhou.myqcloud.com/images%2Fwallhaven-nko7em%20(1).png');
   // background-repeat: no-repeat;
   // background-size: cover;
   position: relative;
   border-radius: var(--aoir-border-radius);

   .author-set-zzz {
      width: 100%;
      height: 100%;
      // background: linear-gradient(90deg, rgb(255 255 255 / 81%), hsl(0deg 0% 100%));
      font-size: 16px;
      display: flex;
      padding: 20px;
      border-radius: var(--aoir-border-radius);

      .author-set-menu {
         width: 220px;
         margin-right: 20px;

         ul {
            width: 100%;

            li {
               width: 100%;
               height: 48px;
               border-radius: 4px;
               color: #333;
               cursor: pointer;
               display: flex;
               align-items: center;
               padding: 0 20px;
               background-color: #FFF;
               color: #555;
               margin-bottom: 10px;

               &:nth-last-child(1) {
                  margin: 0;
               }

               .iconfont {
                  font-size: 22px;
                  margin-right: 15px;
               }
            }

            .liactive {
               background-color: var(--aoir-color-primary);
               color: #FFF;
            }
         }
      }

      .author-set-menu-content {
         flex: 1;
      }
   }
}
</style>